<template>
  <div class="footer">
    <el-row :gutter="20" justify="center">
      <!-- 第一列：网站信息 -->
      <el-col :xs="24" :sm="12" :md="6" class="footer-column">
        <div class="footer-logo">
          <h4 class="footer-title">隐私服务</h4>
        </div>
        <p class="footer-description">使用本网站即表示接受 慧邻农管用户协议</p>
      </el-col>

      <!-- 第二列：快速链接 -->
      <el-col :xs="24" :sm="12" :md="6" class="footer-column">
        <h4 class="footer-title">慧邻农管</h4>
        <el-link type="info" class="footer-link">关于我们</el-link>
        <el-link type="info" class="footer-link">服务条款</el-link>
        <el-link type="info" class="footer-link">隐私政策</el-link>
        <el-link type="info" class="footer-link">联系我们</el-link>
      </el-col>

      <!-- 第三列：联系方式 -->
      <el-col :xs="24" :sm="12" :md="6" class="footer-column">
        <h4 class="footer-title">联系我们</h4>
        <div class="contact-item">
          <el-icon>
            <Message />
          </el-icon>
          <span>12345678990@example.com</span>
        </div>
        <div class="contact-item">
          <el-icon>
            <Iphone />
          </el-icon>
          <span>+86 888-8888-8888</span>
        </div>
      </el-col>
    </el-row>

    <!-- 版权信息 -->
    <div class="copyright">© 2025 河北环境工程学院</div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent } from "vue";
import { Platform, Message, Iphone } from "@element-plus/icons-vue";

defineComponent({
  name: "GlobalFooter",
  props: {
    msg: String,
  },
});
</script>

<style scoped lang="scss">
.global-footer {
  background: var(--el-color-primary);
  color: #fff;
  padding: 40px 20px;
  margin-top: auto;

  .footer-column {
    margin-bottom: 30px;
    padding: 0 20px;

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 15px;

      .site-name {
        font-size: 1.5rem;
        font-weight: bold;
      }
    }

    .footer-description {
      font-size: 0.9rem;
      opacity: 0.8;
    }
  }

  .footer-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 8px;
  }

  .footer-link {
    display: block;
    margin: 8px 0;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s;

    &:hover {
      color: #fff !important;
      transform: translateX(5px);
    }
  }

  .contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    opacity: 0.9;

    .el-icon {
      font-size: 1.2rem;
    }
  }

  .copyright {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0.7;
    font-size: 0.9rem;
  }
}
</style>
